<template>
  <div class="container">
    <h1>todoList列表</h1>
    <todo-input @addNew="onAddNewTask"></todo-input>
    <todo-list :list="tasklist" class="mt-2"></todo-list>
    <todo-button v-model:active="activeBtnIndex"></todo-button>
  </div>
</template>

<script>
import todoInput from './components/todoinput.vue';
import todoList from './components/todolist.vue';
import todoButton from './components/todobutton.vue';
export default {
  name: 'MyApp',
  components: {
    todoList,
    todoButton,
    todoInput
  },
  data() {
    return {
      todolist: [
        { id: 1, task: "周一早晨9点开会", done: false },
        { id: 2, task: "周二晚上8点聚餐", done: false },
        { id: 3, task: "准备周三晚上的演讲稿", done: true }
      ],
      // 添加新任务的ID
      nextId: 4,
      // 按钮xxx索引
      activeBtnIndex: 0
    }
  },
  methods: {
    // 进行数据渲染操作
    onAddNewTask(taskName) {
      this.todolist.push({
        id: this.nextId,
        task: taskName,
        done: false,
      })
      this.nextId++;
    }
  },
  computed: {
    // 数据的筛选过滤
    tasklist() {
      if (this.activeBtnIndex === 0) {
        return this.todolist;
      } else if (this.activeBtnIndex === 1) {
        return this.todolist.filter(x => x.done)
      } else {
        return this.todolist.filter(x => !x.done)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
</style>